<template>
  <page-header-wrapper :title="false">
    <a-card title="证书预览">
      <a-row :gutter="[20, 20]">
        <a-col v-for="item in certList" :key="item.id" :span="6">
          <a-card hoverable style="background-color: rgba(0,0,0,0.1)" :title="`${item.title}${item.name}`">
            <img
              width="100%"
              slot="cover"
              :src="item.file"
              @click="handlePreview(item.file)"
            />
            <a-card-meta>
              <template slot="title"></template>
              <template slot="description">
                <div style="display: flex;align-items: baseline;">
                  <div style="display: inline-block">价格：{{ item.official_fee }}</div>
                  <a-divider type="vertical" />
                  <div style="width: 57%;display: inline-block;height: 44px">作用：{{ item.action }}</div>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <a-modal
      :width="1800"
      v-model="previewVisible"
      :footer="null"
      @cancel="handleCancel"
    >
      <img style="width: 100%" :src="previewImage" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { getCertList } from '@/api/cert'

  export default {
    name: 'CertView',
    data () {
      return {
        certList: [],
        previewVisible: false,
        previewImage: ''
      }
    },
    created () {
      this.getList()
    },
    methods: {
      getList (params) {
        getCertList(params).then(res => {
          this.certList = res.result.data
        })
      },
      handlePreview (url) {
        this.previewImage = url
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      }
    }
  }
</script>

<style scoped>

</style>
